<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<style>
		.u{
			width: 100%;
			border-collapse: collapse;
			height:400px;
			font-family:隶书;
			font-size:20px;
		}
		.u td{
			border:solid 1px #ccc;
			border:0;
		}
		.err{color:red}
		.success{color:green}
	</style>
	<script src="js/jquery.js"></script>
	<script>
		var fok=false;
		var nok=false;
		var cok=false;
		var qok=false;
		var aok=false;
		var regexpPassword = /^[\da-zA-Z\_]{6,12}$/;

		function passwordformerValidate(val) {
			fok = false;
			val=$.trim(val);
			if (val!=${sessionScope.userInfo.pwd}) {
				$("valmsg1").html('原密码输入错误，请重新输入！').addClass('err').removeClass('success');
				return;			
			}else{
				fok=true;
				$("valmsg1").html('原密码输入正确，请继续操作。').addClass('success').removeClass('err');
				return;
			}
		}

		function passwordnowValidate(val) {
			nok=false;
			val=$.trim(val);
			if(!regexpPassword.test(val)){
           		$("#valmsg2").html('密码格式不正确！').addClass('err').removeClass('success');
           		return;
        	}else{
            	nok=true;
            	$("#valmsg2").html('密码有效').addClass('success').removeClass('err');
            	return;
        	}
		}

		function passwordConfirmValidate(val){
			cok=false;
			val=$.trim(val);
			var pwdl = document.getElementsByName("pwdnow");
        	var pwd = pwdl[0].value;
        	if(val!=pwd){
           		$("#valmsg3").html('新密码不同，请重新输入！').addClass('err').removeClass('success');
            	return;
        	}else{
            	cok=true;
            	$("#valmsg3").html('新密码一致，请继续').addClass('success').removeClass('err');
            	return;
        	}
		}

		function questionformerValidate(val){
			qok=false;
			val=$.trim(val);
			if (val!=${sessionScope.userInfo.question}) {
				$("#valmsg4").html('密保问题输入错误，请重新输入！').addClass('err').removeClass('success');
            	return;
			}else{
				qok=true;
				$("#valmsg4").html('密保问题输入正确，请继续').addClass('success').removeClass('err');
            	return;
			}
		}

		function questionformerValidate(val){
			aok=false;
			val=$.trim(val);
			if (val!=${sessionScope.userInfo.answer}) {
				$("#valmsg5").html('密保答案输入错误，请重新输入！').addClass('err').removeClass('success');
            	return;
			}else{
				aok=true;
				$("#valmsg5").html('密保答案输入正确，请继续').addClass('success').removeClass('err');
            	return;
			}
		}

		function toReg(){
			if (fok&&nok&&cok&&qok&&aok) {
				document.forms[0].submit();
			}
		}	

	</script>
</head>
<body>
	<form action="updateSafety.do" method="post">
	<table class="u">
		<tr>
			<td>原密码</td>
			<td>
				<input type="password" name="pwdformer" onchange="passwordformerValidate(this.value)" />
                <label id="valmsg1"></label>		
			</td>
		</tr>
		<tr>
			<td>新密码</td>
			<td>
				<input type="password" name="pwdnow" onchange="passwordnowValidate(this.value)" />
                <label id="valmsg2"></label>	
			</td>
		</tr>
		<tr>
			<td>确认新密码</td>
			<td>
				<input type="password" name="pwdconfirm" onchange="passwordConfirmValidate(this.value)" />
                <label id="valmsg3"></label>	
			</td>
		</tr>
		<tr>
			<td>原密保问题</td>
			<td>
				<input type="text" name="questionformer" onchange="questionformerValidate(this.value)"/>
                <label id="valmsg4"></label>	
			</td>
		</tr>
		<tr>
			<td>原密保答案</td>
			<td>
				<input type="text" name="answerformer" onchange="answerformerValidate(this.value)"/>
                <label id="valmsg5"></label>	
			</td>
		</tr>
		<tr>
			<td>新密保问题</td>
			<td>
				<input type="text" name="questionnow"/>
			</td>
		</tr>
		<tr>
			<td>新密保答案</td>
			<td>
				<input type="text" name="answernow"/>	
			</td>
		</tr>
	</table>
	<button type="button" value="保存修改" onclick="toReg()">保存修改</button>
	</form>
</body>
</html>